<template>
    <div class="study-container">
        <!-- 顶部进度条 -->
        <div class="progress-bar">
            <el-progress :percentage="studyProgress" :format="progressFormat" />
            <div class="progress-info">
                <span>预计完成时间：{{ estimatedTime }}</span>
                <span>当前学习时长：{{ currentTime }}</span>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="study-content">
            <!-- 左侧导航 -->
            <div class="study-nav">
                <div class="nav-header">
                    <h3>学习大纲</h3>
                    <el-button type="primary" size="small" @click="toggleOutline">
                        {{ isOutlineExpanded ? '收起' : '展开' }}
                    </el-button>
                </div>
                <el-collapse v-model="activeOutline" :accordion="true">
                    <el-collapse-item v-for="(section, index) in studyOutline" :key="index" :title="section.title"
                        :name="index">
                        <div class="outline-content">
                            <div v-for="(item, itemIndex) in section.items" :key="itemIndex" class="outline-item"
                                :class="{ active: currentItem.id === item.id }" @click="selectStudyItem(item)">
                                <el-icon>
                                    <component :is="item.icon" />
                                </el-icon>
                                <span>{{ item.title }}</span>
                                <el-tag size="small" :type="item.status === 'completed' ? 'success' : 'info'">
                                    {{ item.status === 'completed' ? '已完成' : '待学习' }}
                                </el-tag>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>

            <!-- 右侧内容区 -->
            <div class="study-main">
                <!-- 学习内容展示 -->
                <div class="content-display">
                    <div class="content-header">
                        <h2>{{ currentItem.title }}</h2>
                        <div class="content-actions">
                            <el-button-group>
                                <el-button type="primary" :icon="Star" @click="toggleFavorite">
                                    {{ isFavorite ? '取消收藏' : '收藏' }}
                                </el-button>
                                <el-button type="success" :icon="Check" @click="markAsCompleted">
                                    标记完成
                                </el-button>
                            </el-button-group>
                            <el-button @click="goToHome">
                                <el-icon>
                                    <HomeFilled />
                                </el-icon>
                                返回首页
                            </el-button>
                        </div>
                    </div>

                    <!-- 内容主体 -->
                    <div class="content-body">
                        <div class="content-section" v-for="(section, index) in currentItem.content" :key="index">
                            <h3>{{ section.title }}</h3>
                            <div class="section-content" v-html="section.content"></div>
                            <div class="section-media" v-if="section.media">
                                <img v-if="section.media.type === 'image'" :src="section.media.url"
                                    :alt="section.media.alt">
                                <video v-else-if="section.media.type === 'video'" controls>
                                    <source :src="section.media.url" :type="section.media.mimeType">
                                </video>
                            </div>
                        </div>
                    </div>

                    <!-- 笔记区域 -->
                    <div class="note-section">
                        <el-collapse v-model="activeNote">
                            <el-collapse-item title="学习笔记" name="note">
                                <div class="note-editor">
                                    <el-input v-model="currentNote" type="textarea" :rows="4"
                                        placeholder="在这里记录你的学习笔记..."></el-input>
                                    <div class="note-actions">
                                        <el-button type="primary" @click="saveNote">保存笔记</el-button>
                                        <el-button @click="clearNote">清空</el-button>
                                    </div>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>

                <!-- 右侧工具栏 -->
                <div class="study-tools">
                    <div class="tool-section">
                        <h4>学习工具</h4>
                        <div class="tool-buttons">
                            <el-button :icon="Timer" @click="startTimer">开始计时</el-button>
                            <el-button :icon="Document" @click="showSummary">生成总结</el-button>
                            <el-button :icon="QuestionFilled" @click="showQuiz">相关测试</el-button>
                        </div>
                    </div>

                    <div class="tool-section">
                        <h4>学习统计</h4>
                        <div class="stat-cards">
                            <el-card shadow="hover">
                                <template #header>
                                    <div class="stat-header">
                                        <el-icon>
                                            <Timer />
                                        </el-icon>
                                        <span>今日学习</span>
                                    </div>
                                </template>
                                <div class="stat-value">{{ todayStudyTime }}分钟</div>
                            </el-card>
                            <el-card shadow="hover">
                                <template #header>
                                    <div class="stat-header">
                                        <el-icon>
                                            <Star />
                                        </el-icon>
                                        <span>掌握程度</span>
                                    </div>
                                </template>
                                <div class="stat-value">{{ masteryLevel }}%</div>
                            </el-card>
                        </div>
                    </div>

                    <div class="tool-section">
                        <h4>相关资源</h4>
                        <div class="resource-list">
                            <div v-for="(resource, index) in relatedResources" :key="index" class="resource-item">
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>{{ resource.title }}</span>
                                <el-button type="primary" link @click="viewResource(resource)">查看</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部控制栏 -->
        <div class="study-footer">
            <div class="footer-controls">
                <el-button-group>
                    <el-button :icon="ArrowLeft" @click="previousItem" :disabled="!hasPrevious">上一节</el-button>
                    <el-button :icon="ArrowRight" @click="nextItem" :disabled="!hasNext">下一节</el-button>
                </el-button-group>
                <el-button type="primary" @click="completeStudy">完成学习</el-button>
            </div>
        </div>

        <!-- 测试对话框 -->
        <el-dialog v-model="quizDialogVisible" title="知识测试" width="60%">
            <div class="quiz-content">
                <div v-if="currentQuiz" class="quiz-question">
                    <h3>{{ currentQuiz.question }}</h3>
                    <el-radio-group v-model="userAnswer">
                        <el-radio v-for="(option, index) in currentQuiz.options" :key="index" :label="option">
                            {{ option }}
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="quizDialogVisible = false">关闭</el-button>
                    <el-button type="primary" @click="submitQuiz">提交答案</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
    Star, Check, Timer, Document, QuestionFilled,
    ArrowLeft, ArrowRight, Reading, VideoPlay, Picture,
    HomeFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 学习进度
const studyProgress = ref(35)
const estimatedTime = ref('2小时30分钟')
const currentTime = ref('45分钟')
const isOutlineExpanded = ref(true)
const activeOutline = ref(['0'])
const activeNote = ref(['note'])
const currentNote = ref('')
const isFavorite = ref(false)
const quizDialogVisible = ref(false)

// 学习大纲数据
const studyOutline = ref([
    {
        title: '第一章：中医基础理论',
        items: [
            {
                id: 1,
                title: '阴阳五行学说',
                icon: 'Reading',
                status: 'completed',
                content: [
                    {
                        title: '阴阳学说的基本概念',
                        content: '阴阳学说是中国古代哲学的重要概念，也是中医学理论体系的重要组成部分...',
                        media: {
                            type: 'image',
                            url: '/images/yin-yang.jpg',
                            alt: '阴阳图'
                        }
                    },
                    {
                        title: '五行学说的基本内容',
                        content: '五行学说认为世界万物都是由木、火、土、金、水五种基本物质构成...'
                    }
                ]
            },
            {
                id: 2,
                title: '脏腑经络理论',
                icon: 'Reading',
                status: 'in_progress',
                content: [
                    {
                        title: '五脏六腑的功能特点',
                        content: '五脏包括心、肝、脾、肺、肾，六腑包括胆、胃、小肠、大肠、膀胱、三焦...'
                    }
                ]
            }
        ]
    },
    {
        title: '第二章：中药学基础',
        items: [
            {
                id: 3,
                title: '中药性能理论',
                icon: 'Reading',
                status: 'pending',
                content: [
                    {
                        title: '四气五味',
                        content: '四气指寒、热、温、凉，五味指酸、苦、甘、辛、咸...'
                    }
                ]
            }
        ]
    }
])

// 当前学习项
const currentItem = ref(studyOutline.value[0].items[0])

// 相关资源
const relatedResources = ref([
    { title: '《黄帝内经》原文解读', type: 'document' },
    { title: '中医基础理论视频课程', type: 'video' },
    { title: '中药学图谱集', type: 'image' }
])

// 学习统计
const todayStudyTime = ref(120)
const masteryLevel = ref(75)

// 计算属性
const hasPrevious = computed(() => {
    // 实现上一节逻辑
    return true
})

const hasNext = computed(() => {
    // 实现下一节逻辑
    return true
})

// 方法
const progressFormat = (percentage) => {
    return percentage + '% 完成'
}

const toggleOutline = () => {
    isOutlineExpanded.value = !isOutlineExpanded.value
}

const selectStudyItem = (item) => {
    currentItem.value = item
}

const toggleFavorite = () => {
    isFavorite.value = !isFavorite.value
    ElMessage.success(isFavorite.value ? '已添加到收藏' : '已取消收藏')
}

const markAsCompleted = () => {
    currentItem.value.status = 'completed'
    ElMessage.success('已标记为完成')
}

const saveNote = () => {
    ElMessage.success('笔记已保存')
}

const clearNote = () => {
    currentNote.value = ''
}

const startTimer = () => {
    ElMessage.success('开始计时')
}

const showSummary = () => {
    ElMessage.success('正在生成学习总结...')
}

const showQuiz = () => {
    quizDialogVisible.value = true
}

const submitQuiz = () => {
    ElMessage.success('答案已提交')
    quizDialogVisible.value = false
}

const viewResource = (resource) => {
    ElMessage.success('正在打开资源：' + resource.title)
}

const previousItem = () => {
    // 实现上一节逻辑
}

const nextItem = () => {
    // 实现下一节逻辑
}

const completeStudy = () => {
    ElMessage.success('恭喜完成本次学习！')
    router.push('/review')
}

const goToHome = () => {
    router.push('/home')
}
</script>

<style lang="scss" scoped>
.study-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;

    .progress-bar {
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color: #909399;
        }
    }

    .study-content {
        flex: 1;
        display: flex;
        gap: 20px;
        padding: 20px;
        overflow: hidden;

        .study-nav {
            width: 300px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;

            .nav-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;

                h3 {
                    margin: 0;
                }
            }

            .outline-content {
                .outline-item {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    padding: 10px;
                    cursor: pointer;
                    border-radius: 4px;
                    transition: all 0.3s;

                    &:hover {
                        background-color: #f5f7fa;
                    }

                    &.active {
                        background-color: #ecf5ff;
                        color: #409EFF;
                    }

                    .el-icon {
                        font-size: 18px;
                    }
                }
            }
        }

        .study-main {
            flex: 1;
            display: flex;
            gap: 20px;
            overflow: hidden;

            .content-display {
                flex: 1;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                padding: 20px;
                overflow-y: auto;

                .content-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20px;

                    h2 {
                        margin: 0;
                    }

                    .content-actions {
                        display: flex;
                        gap: 10px;
                        align-items: center;
                    }
                }

                .content-body {
                    .content-section {
                        margin-bottom: 30px;

                        h3 {
                            color: #303133;
                            margin-bottom: 15px;
                        }

                        .section-content {
                            line-height: 1.8;
                            color: #606266;
                        }

                        .section-media {
                            margin-top: 20px;

                            img,
                            video {
                                max-width: 100%;
                                border-radius: 8px;
                            }
                        }
                    }
                }

                .note-section {
                    margin-top: 30px;

                    .note-editor {
                        .note-actions {
                            margin-top: 10px;
                            text-align: right;
                        }
                    }
                }
            }

            .study-tools {
                width: 300px;
                display: flex;
                flex-direction: column;
                gap: 20px;

                .tool-section {
                    background-color: #fff;
                    border-radius: 8px;
                    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                    padding: 20px;

                    h4 {
                        margin: 0 0 15px;
                        color: #303133;
                    }

                    .tool-buttons {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                    }

                    .stat-cards {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: 10px;

                        .el-card {
                            .stat-header {
                                display: flex;
                                align-items: center;
                                gap: 5px;
                            }

                            .stat-value {
                                font-size: 24px;
                                font-weight: bold;
                                color: #409EFF;
                                text-align: center;
                                margin-top: 10px;
                            }
                        }
                    }

                    .resource-list {
                        .resource-item {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            padding: 10px 0;
                            border-bottom: 1px solid #EBEEF5;

                            &:last-child {
                                border-bottom: none;
                            }
                        }
                    }
                }
            }
        }

        // 响应式设计
        @media screen and (max-width: 1200px) {
            .study-content {
                flex-direction: column;

                .study-nav {
                    width: 100% !important;
                }

                .study-main {
                    flex-direction: column;

                    .study-tools {
                        width: 100% !important;
                    }
                }
            }
        }
    }

    .study-footer {
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);

        .footer-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
    }
}
</style>